<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>技能详情</title>
</head>
<body>
    <h3>技能详情</h3>
    <table align="center" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>编号</th> <td id="sid">1</td>
        </tr>
        <tr>
            <th>技能名称</th> <td id="skillName">1</td>
        </tr>
        <tr>
            <th>技能类型</th> <td id="type">1</td>
        </tr>
        <tr>
            <th>技能描述</th> <td id="description">1</td>
        </tr>
        <tr>
            <th>冷却</th> <td id="cooldown">1</td>
        </tr>
        <tr>
            <th>消耗</th> <td id="cost">1</td>
        </tr>
        <tr>
            <th>所属英雄</th> <td id="hname">1</td>
        </tr>

    </table>

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script>
    // 文档就绪函数
    $(function (){
        // 获取地址栏参数
        let url = window.location.search;
        let params = new URLSearchParams(url);
        let sid = params.get("sid");
        // 发起查询详情请求
        axios.get( "/skill/"+sid  ).then((res)=>{
            console.log(res)
            // 获取数据
            let data = res.data;
            // 绑定数据
            $("#sid").text(data.sid);
            $("#skillName").text(data.skillName);
            $("#type").text(data.type);
            $("#description").text(data.description);
            $("#cooldown").text(data.cooldown);
            $("#cost").text(data.cost);
            $("#hname").text(data.heroInfo ? data.heroInfo.hname : '无');
        })
    })


</script>
</body>
</html>